Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
First
Second
Third
@import url('https://fonts.googleapis.com/css?family=Lato:300,400'); * { box-sizing: border-box; } body { background: #1A1E23; font-family: "Lato", sans-serif; -webkit-font-smoothing: antialiased; } nav { position: relative; padding-bottom: 12px; } nav .line { height: 2px; position: absolute; bottom: 0; margin: 10px 0 0 0; background: #FF1847; } nav ul { padding: 0; margin: 0; list-style: none; display: flex; } nav ul li { margin: 0 40px 0 0; opacity: 0.4; transition: all 0.4s ease; } nav ul li:hover { opacity: 0.7; } nav ul li.active { opacity: 1; } nav ul li:last-child { margin-right: 0; } nav ul li a { text-decoration: none; color: #fff; text-transform: uppercase; display: block; font-weight: 600; letter-spacing: 0.2em; font-size: 14px; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
var nav = $('nav'); var line = $('
').addClass('line'); line.appendTo(nav); var active = nav.find('.active'); var pos = 0; var wid = 0; if(active.length) { pos = active.position().left; wid = active.width(); line.css({ left: pos, width: wid }); } nav.find('ul li a').click(function(e) { e.preventDefault(); if(!$(this).parent().hasClass('active') && !nav.hasClass('animate')) { nav.addClass('animate'); var _this = $(this); nav.find('ul li').removeClass('active'); var position = _this.parent().position(); var width = _this.parent().width(); if(position.left >= pos) { line.animate({ width: ((position.left - pos) + width) }, 300, function() { line.animate({ width: width, left: position.left }, 150, function() { nav.removeClass('animate'); }); _this.parent().addClass('active'); }); } else { line.animate({ left: position.left, width: ((pos - position.left) + wid) }, 300, function() { line.animate({ width: width }, 150, function() { nav.removeClass('animate'); }); _this.parent().addClass('active'); }); } pos = position.left; wid = width; } });